import type { Matrix4 } from "@shopify/react-native-skia"; // 导入 Matrix4 类型，用于描述矩阵
import type { FC, ReactNode } from "react"; // 导入 FC (Function Component) 和 ReactNode 类型
import { createContext, useCallback, useContext, useReducer } from "react"; // 导入 React 的相关 API
import type { SharedValue } from "react-native-reanimated"; // 导入 SharedValue 类型，用于共享值

import type { StickerProps } from "./stickers/Sticker"; // 导入 StickerProps 类型，用于贴纸的属性
import { type StickerDimensions } from "./stickers/types"; // 导入 StickerDimensions 类型，用于描述贴纸尺寸

// 贴纸接口，包含一个贴纸组件、尺寸和矩阵
export interface Sticker {
  Sticker: FC<StickerProps>; // 贴纸组件
  size: StickerDimensions; // 贴纸尺寸
  matrix: SharedValue<Matrix4>; // 贴纸的变换矩阵
}

// 贴纸数组类型
type Stickers = Sticker[];

// 贴纸上下文接口，包含贴纸和调度函数
interface StickerContext {
  stickers: Stickers; // 当前所有贴纸
  dispatch: (action: StickerAction) => void; // 调度函数，用于更新状态
}

// 创建一个 StickerContext，上下文默认值为 null
// eslint-disable-next-line @typescript-eslint/no-redeclare
const StickerContext = createContext<StickerContext | null>(null);

// 贴纸操作类型，包括添加贴纸的动作
interface StickerAction {
  action: "add"; // 动作类型为 "add"，表示添加贴纸
  sticker: Sticker; // 要添加的贴纸
}

// reducer 函数，处理贴纸的状态更新
const stickerReducer = (stickers: Stickers, action: StickerAction) => {
  return [...stickers, action.sticker]; // 新增一个贴纸到现有的贴纸列表中
};

// 自定义 Hook，用于访问 StickerContext
export const useStickerContext = () => {
  const ctx = useContext(StickerContext); // 获取上下文
  if (ctx === null) {
    throw new Error("No Sticker context found"); // 如果上下文为空，抛出错误
  }
  const { stickers, dispatch } = ctx; // 从上下文中获取 stickers 和 dispatch 函数
  const addSticker = useCallback(
    (sticker: Sticker) => {
      dispatch({ action: "add", sticker }); // 调用 dispatch 添加一个贴纸
    },
    [dispatch] // 依赖 dispatch 函数，避免不必要的重新渲染
  );
  return {
    stickers, // 返回当前所有贴纸
    addSticker, // 返回添加贴纸的函数
  };
};

// 贴纸提供者组件，负责提供 StickerContext
interface StickerProviderProps {
  children: ReactNode | ReactNode[]; // children 为组件的子元素
}

export const StickerProvider = ({ children }: StickerProviderProps) => {
  const [stickers, dispatch] = useReducer(stickerReducer, []); // 使用 useReducer 管理贴纸状态
  return (
    <StickerContext.Provider value={{ stickers, dispatch }}>
      {children} {/* 在子组件中提供 StickerContext */}
    </StickerContext.Provider>
  );
};
